<template>
  <div id="app">
    <TopNav></TopNav>
    <keep-alive>
      <router-view/>
    </keep-alive>
    <Play :musicID="$root.playingMusic.musicID" />
  </div>
</template>

<script>
import TopNav from "../src/components/TopNav";
import Play from '../src/components/Play'
export default {
  name: "App",
  components: {
    TopNav,
    Play
  },
  // data() {
  //   return {
  //     musicID: 0
  //   }
  // },
  // methods: {
  //   playMusic(id) {
  //     this.musicID = id;
  //   }
  // }
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-top: 40px;
  -webkit-tap-highlight-color: transparent;
}

html,body {
  width: 100%;
  height: 100%;
  background-color: #fcfcfd;
  overflow: hidden;
  overflow-y: auto;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
